<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Platform Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <script src="/dist/ionic.js"></script>
</head>

<body onload="initialize()">
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Platform</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content padding>
        <h2>The Platforms are:</h2>
        <ul class="platform-name-list"></ul>

        <h2>The Platforms versions are:</h2>
        <ul class="platform-version-list"></ul>

        <h2>The orientation is <span class="orientation"></span></h2>

        <h2>The ready event has fired: <span class="ready"></span></h2>
      </ion-content>


  </ion-app>

  <script>
    async function initialize() {
      const app = document.querySelector('ion-app');
      await app.componentOnReady();
      const platform = document.querySelector('ion-platform');
      await platform.componentOnReady();

      const platforms = platform.platforms();
      const platformListElement = document.querySelector('.platform-name-list');
      platforms.forEach(platform => {
        const element = document.createElement('li');
        element.textContent = platform;
        platformListElement.appendChild(element);
      });

      const platformVersionList = document.querySelector('.platform-version-list');
      const versions = platform.versions();
      versions.forEach(version => {
        const element = document.createElement('li');
        element.textContent = JSON.stringify(version);
        platformVersionList.appendChild(element);
      });

      const orientationText = platform.isPortrait() ? 'portrait' : 'landscape';
      document.querySelector('.orientation').textContent = orientationText;


      const readyElement = document.querySelector('.ready');
      readyElement.textContent = 'No';

      // use artificial timeout to see the visual
      setTimeout(() => {
        platform.ready().then(() => {
          readyElement.textContent = 'Yes';
        });
      }, 1000);

    }
  </script>
</body>

</html>
